<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title></title>
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
		<link rel="stylesheet" type="text/css" href="css/positionWeb.css" />
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=d774a788022023b6de0e405a2aa989ab"></script>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/data.js" type="text/javascript" charset="utf-8"></script>

		<body>
			<div class="positionWeb">
				<div class="positionMap">
					<div id='container'></div>
				</div>
				<div class="duihuan">
					<img src="img/positionWeb/position.png"/>
				</div>
				<div class="back">
					<a href="index.html">
						<img src="img/positionWeb/back.png"/>
					</a>
				</div>
			</div>
			<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				var map, geolocation;
				map = new AMap.Map('container', {
					resizeEnable: true,
					center: [res[0].JD, res[0].WD],
					zoom: 17,
				});
				map.plugin('AMap.Geolocation', function() {
					geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：无穷大
						buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
						buttonPosition: 'LB'
					});
					//map.addControl(geolocation);
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
					//AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
				});
				//解析定位结果
				function onComplete(data) {
					var str = ['定位成功'];
					str.push('经度：' + data.position.getLng());
					str.push('纬度：' + data.position.getLat());
					if(data.accuracy) {
						str.push('精度：' + data.accuracy + ' 米');
					}
					//获取自身位置
					var oneSelfLng = data.position.getLng();
					var oneSelfLat = data.position.getLat();

					res.sort(function(a, b) {
						return(Math.sqrt(Math.pow((a.JD - oneSelfLng), 2) + Math.pow((a.WD - oneSelfLat), 2))) - (Math.sqrt(Math.pow((b.JD - oneSelfLng), 2) + Math.pow((b.WD - oneSelfLat), 2)));
					})
				}
				//************************************
				//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
				var map = new AMap.Map("container", {
					resizeEnable: true,
					center: [res[0].JD, res[0].WD],
					zoom: 17
				});
				addMarker();
				//添加marker标记
				function addMarker() {
					map.clearMap();
					var marker = new AMap.Marker({
						map: map,
						position: [res[0].JD, res[0].WD]
					});
					//鼠标点击marker弹出自定义的信息窗体
					AMap.event.addListener(marker, 'click', function() {
						infoWindow.open(map, marker.getPosition());
					});
				}

				//实例化信息窗体
				var title = res[0].shop_name,
					content = [];
				content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址:"+res[0].address);
				content.push("电话："+res[0].mobile);
				var infoWindow = new AMap.InfoWindow({
					isCustom: true, //使用自定义窗体
					content: createInfoWindow(title, content.join("<br/>")),
					offset: new AMap.Pixel(16, -45)
				});

				//构建自定义信息窗体
				function createInfoWindow(title, content) {
					var info = document.createElement("div");
					info.className = "info";

					//可以通过下面的方式修改自定义窗体的宽高
					info.style.width = "100%";
					info.style.height = "25%";
					// 定义顶部标题
					var top = document.createElement("div");
					var titleD = document.createElement("div");
					var closeX = document.createElement("img");
					top.className = "info-top";
					titleD.innerHTML = title;
					closeX.src = "http://webapi.amap.com/images/close2.gif";
					closeX.onclick = closeInfoWindow;

					top.appendChild(titleD);
					top.appendChild(closeX);
					info.appendChild(top);

					// 定义中部内容
					var middle = document.createElement("div");
					middle.className = "info-middle";
					middle.style.backgroundColor = 'white';
					middle.innerHTML = content;
					info.appendChild(middle);

					// 定义底部内容
					var bottom = document.createElement("div");
					bottom.className = "info-bottom";
					bottom.style.position = 'relative';
					bottom.style.top = '0px';
					bottom.style.margin = '0 auto';
					var sharp = document.createElement("img");
					sharp.src = "http://webapi.amap.com/images/sharp.png";
					bottom.appendChild(sharp);
					info.appendChild(bottom);
					return info;
				}

				//关闭信息窗体
				function closeInfoWindow() {
					map.clearInfoWindow();
				}
				$("info-top img").on("click",closeInfoWindow);
			</script>
		</body>

</html>